<template>
  <div class="container-fluid">
    <compTitle :prop_items="data_titles" />
    <ul class="use_title">
      <li>
        <b-button variant="primary" @click="userModel = !userModel">添加用户</b-button>
      </li>
    </ul>
    <b-modal
      id="userModel"
      v-model="userModel"
      :title="title"
      size="lg"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <div class="registered col-10">
        <b-form inline>
          <label class="col-3">用户名</label>
          <b-form-input
            type="text"
            v-model="user_form.name"
            aria-describedby="name_input"
            :state="nameState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="name_input">{{nameValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline>
          <label class="col-3">电话</label>
          <b-form-input
            type="text"
            v-model="user_form.tel"
            aria-describedby="tel_input"
            :state="telState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="tel_input">{{telValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline>
          <label class="col-3">邮箱</label>
          <b-form-input
            type="text"
            v-model="user_form.email"
            aria-describedby="email_input"
            :state="emailState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="email_input">{{emailValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline v-if="addFlag">
          <b-form-input tabindex="-1" type="password" style="width:0px;height:0px;padding:0px;"></b-form-input>
          <label class="col-3">密码</label>
          <b-form-input
            v-model="user_form.password"
            type="password"
            aria-describedby="password_input"
            :state="passwordState"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="password_input">{{passwordValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline v-if="addFlag">
          <label class="col-3">确认密码</label>
          <b-form-input
            v-model="repeat_password"
            type="password"
            :state="repeat_passwordState"
            aria-describedby="repeat_password_input"
            class="col-8"
          ></b-form-input>
          <b-form-invalid-feedback id="repeat_password_input">{{repeat_passwordValid}}</b-form-invalid-feedback>
        </b-form>
        <b-form inline>
          <label class="col-3">角色</label>
          <b-form-select
            class="col-8"
            v-model="user_form.rolesId"
            :options="user_purview"
            value-field="id"
            text-field="name"
          ></b-form-select>
        </b-form>
        <b-form inline>
          <label class="col-3">描述</label>
          <b-form-textarea
            :state="descriptionState"
            aria-describedby="description_input"
            v-model="user_form.description"
            class="col-8"
          ></b-form-textarea>
          <b-form-invalid-feedback id="description_input">{{descriptionValid}}</b-form-invalid-feedback>
        </b-form>
      </div>
    </b-modal>

    <b-table
      class="col-11"
      responsive
      striped
      bordered
      small
      hover
      head-variant="dark"
      stacked="md"
      :items="accounts"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
    >
      <template v-slot:cell(operating)="row">
        <b-button class="edit" variant="info" @click="editUser(row.item.id,row.item)">编辑</b-button>
        <b-button class="reset" variant="primary" @click="resetPassword(row.item.id,row.item)">重置密码</b-button>
        <delet class="delet" :itemID="row.item.id" v-on:deleteRange="delet">删除</delet>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      align="left"
      aria-controls="table-with-pagination"
    >
    </b-pagination>
  </div>
</template>
<script>
import compTitle from '../../components/compTitle/index';
import Delet from "../../components/delete.vue";
import { UTCToLocalFormat } from "../../assets/js/date";
import { mapActions, mapState } from "vuex";

const fields = [
  {key: "name", label: "用户名", sortable: true},
  {key: "tel", label: "电话", sortable: true},
  {
    key: "rolesId",
    label: "角色",
    formatter(value) {
      if(value == 1) {
        return "管理员";
      }else if(value == 2) {
        return "系统配置员";
      }else if(value == 3) {
        return "商家";
      }else if(value == 4) {
        return "普通用户";
      }
    },
  },
  {key: "email", label: "电子邮箱", sortable: false},
  {key: "description", label: "描述"},
  {
    key: "createTime",
    label: "注册时间",
    formatter(value) {
      return UTCToLocalFormat(value);
    },
    sortable: true
  },
  {key: "operating", label: "操作"}
];

// const items = [
//   {username: "张三", tel: "139",roles_name: "管理员", email: 'zhangsan@admin.com', create_time: "2019-01-01"},
//   {username: "李四", tel: "139",roles_name: "管理员", email: 'lisi@admin.com', create_time: "2019-01-02"},
//   {username: "小明", tel: "139",roles_name: "管理员", email: 'xiaoming@admin.com', create_time: "2019-01-03"},
//   {username: "小强", tel: "139",roles_name: "管理员", email: 'xiaoqiang@admin.com', create_time: "2019-01-08"},
//   {username: "小梅", tel: "139",roles_name: "管理员", email: 'xiaomei@admin.com', create_time: "2019-01-09"}
// ];
export default {
  components: {compTitle,Delet },
  data() {
    return {
      modalShow: false,
      data_titles: [
        {
          text: "用户管理"
        }
      ],
      user_purview: [
        { id: "1", name: "管理员" },
        { id: "2", name: "系统配置员" },
        { id: "3", name: "商家" },
        { id: "4", name: "普通用户" },
      ],
      userModel: false,
      title: "用户注册",
      user_form: {
        //用户信息
        name: "",
        tel: "",
        email: "",
        password: "",
        description: "",
        rolesId: "1",
      },
      //state=null表示输入框未验证，默认状态;true输入有效，显示绿色边框;false输入无效，显示为红色边框。
      nameState: null,
      telState: null,
      emailState: null,
      passwordState: null,
      repeat_passwordState: null,
      descriptionState: null,
      nameValid: "",
      telValid: "",
      emailValid: "",
      passwordValid: "",
      repeat_passwordValid: "",
      descriptionValid: "",
      repeat_password: "",//确认密码
      addFlag: true,
      editID: "",
      fields: fields,
      currentPage: 1,
      perPage: 3
    }
  },
  computed: {
    ...mapState({
      accounts: (state) => state.account.accounts, //用户数据
    }),
    //用户数据的总数
    totalRows: function () {
      return this.accounts.length;
    },
  },
  mounted() {
    this.getAccounts();
  },
  methods: {
    ...mapActions([
      "getAccounts",//获取用户列表
      "postUser", //添加账户
      // "resetWord", //重置密码
      // "deleteUser", //删除用户信息
      "edit_user", //编辑用户信息
    ]),
    //用户添加和编辑
    async handleOk(e) {
      //添加账户提交或者编辑账户提交
      if (this.addFlag) {
        await this.postUser(this.user_form);
        console.log(this.user_form);
        this.toast("用户添加成功", "success", "添加用户提示");
        await this.getAccounts();
      } else {
        delete this.user_form.password;
        await this.edit_user({
          accountId: this.editID,
          user_form: this.user_form,
        });
        this.toast("用户编辑成功", "success", "编辑用户提示");
        await this.getAccounts();
      }
    },
    //重置模态框
    resetModal() {
      if (this.addFlag) {
        this.user_form.password = "";
        this.repeat_password = "";
      }
      this.user_form.tel = "";
      this.user_form.name = "";
      this.user_form.description = "";
      this.user_form.rolesId = 1;
      this.user_form.email = "";
      this.addFlag = true;
      this.title = "用户注册";
    },
    async delet(value, index) {
      console.log(value);
      console.log(index);
    },
    //编辑用户
    editUser(value, item) {
      console.log(value, item);
      this.title = "用户编辑";
      this.editID = value;
      this.addFlag = false;
      this.userModel = true;
      this.user_form.name = item.name;
      this.user_form.tel = item.tel;
      this.user_form.email = item.email;
      this.user_form.description = item.description;
      this.user_form.rolesId = item.rolesId;
    }
  }
}
</script>
<style scoped>
.use_title {
  list-style-type: none;
  padding-left: 0;
}
.registered {
  margin: auto;
}
form {
  margin-bottom: 10px;
  text-align: right;
}
form lable {
  justify-content: flex-end;
}
</style>